<template>
  <div class="k-form k-form-login">
    <div>
      <label class="k-form-field">
        <span>用户名</span>
        <input v-model="login.loginId" class="k-textbox" placeholder="请输入用户名">
      </label>
      <label class="k-form-field">
        <span>邮箱 <span class="k-required">*</span></span>
        <input v-model="login.userMail" type="email" class="k-textbox" placeholder="******@***.com">
      </label>
      <label class="k-form-field">
        <span>密码</span>
        <input v-model="login.passWord" type="password" class="k-textbox" placeholder="请输入密码">
      </label>
      <label class="k-form-field" style="margin-bottom: 1rem">
        <input
          id="auth-2fa"
          type="checkbox"
          class="k-checkbox"
          checked="checked"
        >
        <label class="k-checkbox-label" for="auth-2fa">记住密码</label>
      </label>
      <button
        class="k-button k-primary"
        @click="loginSubmit"
      >
        登录
      </button>
      <button type="submit" class="k-button" onclick="return false;">
        忘记密码?
      </button>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        login: {
          loginId: '',
          userMail: '',
          passWord: ''
        }
      }
    },
    methods: {
      loginSubmit() {
        this.$post('/service/login', this.login).then(res => {
          if (res.code !== 200) {
            this.$KendoNotify({
              title: '错误信息:' + res.code,
              message: res.message
            }, 'error')
          } else {
            this.$KendoNotify({
              title: '提示信息:',
              message: res.message
            }, 'success')
            const expireTimes = 1000 * 60 * 30
            this.setCookie('token', res.data.token, expireTimes) // 设置Session
            this.setCookie('localStorage', res.data.localStorage, expireTimes) // 设置用户编号
            this.$bus.emit('beforeCloseloginDialog', true)
          }
        }).catch(e => {
          console.log(e)
        })
      }
    }
  }
</script>

<style>
    .k-form-login{
        width: 25%;
        margin: 0px auto;
        border: 1px solid #e5dfdf;
        position: relative;
        z-index: 9999;
        border-radius: 5px;
        background-color: #ffffff0f;
        transition: ease all 0.5s;
        box-shadow: 0 5px 10px #90afdd59;
        padding: 50px;
        font-family:sans-serif;
        background-color: rgba(255, 255, 255, 0.2);
    }
</style>
